<template lang="html">
  <el-dialog :id="target"   :title="dialoginfo.title"
             @open="listenopen()"
             :append-to-body="true"
             top="60px"
             width="50%"
             @close="close" :visible="dialoginfo.show">
    <el-form size="mini"  :model="dialoginfo.data" ref="dialoginfo" label-position="left">
      <el-row class="t-center">
        <el-col>
          <el-form-item>
            <el-upload  id="imageUpload"
                        action="string"
                        :show-file-list="false"
                        list-type="picture"
                        :before-upload="beforeAvatarUpload"
                        :on-remove="handleRemove"
                        :http-request="submitUpload">
              <img style="width:100%;height:100%"  v-if="dialoginfo.data.thumbNailImagePath" :src="this.proAPI.RESOURCE_URL+dialoginfo.data.imagePath" >
              <i v-else class="el-icon-upload2 avatar-uploader-icon">上传图片<br/><br/><small>手机端建议750 X 200，PC端建议1080 X 288</small></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item :rules="[{ required: true, message: '不能为空'}]"
                    prop="title" label="标题" :label-width="formLabelWidth">
        <el-input  v-model="dialoginfo.data.title" auto-complete="off" clearable/>
      </el-form-item>
      <el-form-item prop="url" label="链接地址" :label-width="formLabelWidth">
        <el-input type="text" v-model="dialoginfo.data.url" auto-complete="off" clearable></el-input>
      </el-form-item>
      <el-form-item  :rules="[
                      { required: true, message: '不能为空'}
                    ]" prop="type" label="类型" :label-width="formLabelWidth">
        <el-select clearable v-model.trim="dialoginfo.data.type" style="width: 100%;" placeholder="请选择">
          <el-option label="手机端" :value="1"></el-option>
          <el-option label="电脑端" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  :rules="[
                      { required: true, message: '不能为空'}
                    ]" prop="skipWay" label="点击跳转" :label-width="formLabelWidth">
        <el-select clearable v-model.trim="dialoginfo.data.skipWay" style="width: 100%;" placeholder="请选择">
          <el-option label="不跳转" :value="0"></el-option>
          <el-option label="跳转" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="dialoginfo.data.id!=null" :rules="[
                      { required: true, message: '不能为空'}
                    ]" prop="state" label="状态" :label-width="formLabelWidth">
        <el-select clearable v-model.trim="dialoginfo.data.state" style="width: 100%;" placeholder="请选择">
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="已审核" :value="1"></el-option>
          <el-option label="已禁用" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item style="text-align: right">
          <el-button size="mini" @click="dialoginfo.show = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="toAdd('dialoginfo')">保 存</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
  export default {
    inject: ["reload"],
    data() {
      return {
        target: "bannerModify",
        formLabelWidth: '104px'
      }
    },
    props: ['dialoginfo'],
    methods: {
      listenopen() {
        if (this.isadd && this.$refs['dialoginfo'] != null) {
          this.$refs['dialoginfo'].resetFields();
        }
      },
      close() {
        this.$emit('changedialogshow');
      },
      toAdd(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$store.commit("saveLoadingMap", {"target": this.dialoginfo.url,id:this.target});
            this.proAPI.postJson(this.dialoginfo.url, this.dialoginfo.data).then((res) => {
              this.$message.success({
                "message": res.message
              })
              setTimeout(()=>{
                this.reload();
              },1000)
            });
          } else {
            return false;
          }
        });
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG&&!isPNG) {
          this.$message.error('图片格式只能是 JPG或者PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('图片大小不能超过 2MB!');
        }
        return (isJPG||isPNG) && isLt2M;
      },
      submitUpload(item) {
        // console.log(item);
        let formData = new FormData()
        formData.append('file', item.file)
        this.$store.commit("saveLoadingMap", {"target": this.proAPI.URLS.uploadSingleHeadImage,id:this.target});
        this.proAPI.postFile(this.proAPI.URLS.uploadSingleHeadImage, formData).then(res => {
          this.dialoginfo.data.thumbNailImagePath = res.data.thumbNailImagePath;
          this.dialoginfo.data.imagePath = res.data.imagePath;
        })
      }
    },
    updated() {
    },
    mounted() {

    },
  };
</script>
<style scoped>
  #userage >>> .el-input-number .el-input__inner {
    text-align: left;
  }
  #imageUpload >>> .el-upload--picture{
    background-color: #fbfdff;
    border: 1px dashed #c0ccda;
    border-radius: 6px;
    box-sizing: border-box;
    width: 80%;
    height: 200px;
    line-height: 200px!important;
    vertical-align: top;
  }
</style>
